<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>面向高校学生的多模态智能模拟面试评测智能体</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            accent: '#FF9F43',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
      .section-fade {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
      }
      .section-fade.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .nav-scrolled {
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      }
    }
  </style>
</head>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const ctx = document.getElementById('skillRadarChart').getContext('2d');
    const radarChart = new Chart(ctx, {
      type: 'radar',
      data: {
        labels: ['专业知识', '技能匹配', '语言表达', '逻辑思维', '应变能力', '创新思维'],
        datasets: [{
          label: '当前能力评估',
          data: [75, 80, 65, 70, 60, 65],
          backgroundColor: 'rgba(22, 93, 255, 0.2)',
          borderColor: 'rgba(22, 93, 255, 1)',
          pointBackgroundColor: 'rgba(22, 93, 255, 1)',
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: 'rgba(22, 93, 255, 1)'
        }, {
          label: '目标能力水平',
          data: [90, 90, 85, 85, 80, 80],
          backgroundColor: 'rgba(54, 211, 153, 0.1)',
          borderColor: 'rgba(54, 211, 153, 0.5)',
          pointBackgroundColor: 'rgba(54, 211, 153, 0.5)',
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: 'rgba(54, 211, 153, 0.5)',
          borderDash: [5, 5]
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          r: {
            angleLines: { display: true },
            suggestedMin: 0,
            suggestedMax: 100,
            ticks: { stepSize: 20 }
          }
        },
        plugins: {
          legend: { position: 'bottom' },
          tooltip: {
            callbacks: {
              label: function(context) {
                return `${context.dataset.label}: ${context.raw}`;
              }
            }
          }
        },
        animation: {
          duration: 2000,
          easing: 'easeOutQuart'
        }
      }
    });
  });
</script>

<body class="font-inter bg-light text-dark antialiased">
  <!-- 导航栏 -->
  <!-- 导航栏 -->
<nav id="main-nav" class="fixed w-full top-0 z-50 transition-all duration-300 py-4">
  <div class="container mx-auto px-4 md:px-6 lg:px-8">
    <div class="flex justify-between items-center">
      <a href="#" class="flex items-center space-x-2">
        <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
          <i class="fa fa-comments text-white text-xl"></i>
        </div>
        <span class="text-xl font-bold text-primary">智面未来</span>
      </a>

      <!-- 桌面导航 -->
      <div class="hidden md:flex items-center space-x-6">
        <!-- 系统说明（移至左侧） -->
        <div class="relative group mr-6">
          <a href="#" class="text-dark hover:text-primary transition-colors font-medium flex items-center">
            系统说明 <i class="fa fa-chevron-down ml-1 text-xs transition-transform group-hover:rotate-180"></i>
          </a>
          <div class="absolute left-0 mt-2 w-48 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
            <a href="#business" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">业务场景</a>
            <a href="#features" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">功能需求</a>
            <a href="#technology" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">技术架构</a>
          </div>
        </div>

        <!-- 模拟面试 -->
        <a href="/mnms/" class="text-dark hover:text-primary transition-colors font-medium">模拟面试</a>

        <!-- 个人主页（带下拉菜单） -->
        <div class="relative group">
          <a href="#" class="text-dark hover:text-primary transition-colors font-medium flex items-center">
            {{ name }}的个人主页 <i class="fa fa-chevron-down ml-1 text-xs transition-transform group-hover:rotate-180"></i>
          </a>
          <div class="absolute right-0 mt-2 w-60 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
            <a href="/info/" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">个人信息</a>
            <a href="/changeinfo/" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">修改个人信息</a>
            <a href="/msjl/" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">面试记录</a>

            <div class="border-t border-gray-100 my-1"></div>
            <a href="#about" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">关于我们</a>
            <a href="/login/" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors text-red-600">注销</a>
          </div>
        </div>

      </div>

      <!-- 移动端菜单按钮 -->
      <button id="menu-btn" class="md:hidden text-dark focus:outline-none">
        <i class="fa fa-bars text-2xl"></i>
      </button>
    </div>
  </div>

  <!-- 移动端导航菜单 -->
  <div id="mobile-menu" class="md:hidden hidden bg-white absolute w-full border-t border-gray-100">
    <div class="container mx-auto px-4 py-3 space-y-3">
      <a href="/mnms/" class="block text-dark hover:text-primary transition-colors py-2 font-medium">模拟面试</a>

      <!-- 系统说明下拉菜单（移动端） -->
      <div class="mobile-dropdown">
        <button class="w-full text-left flex justify-between items-center text-dark hover:text-primary transition-colors py-2 font-medium">
          系统说明 <i class="fa fa-chevron-down text-xs transition-transform"></i>
        </button>
        <div class="mobile-dropdown-content hidden pl-4 pt-2 pb-3 space-y-2">
          <a href="#business" class="block text-dark hover:text-primary transition-colors py-1">业务场景</a>
          <a href="#features" class="block text-dark hover:text-primary transition-colors py-1">功能需求</a>
          <a href="#technology" class="block text-dark hover:text-primary transition-colors py-1">技术架构</a>
        </div>
      </div>

      <!-- 个人主页下拉菜单（移动端） -->
      <div class="mobile-dropdown">
        <button class="w-full text-left flex justify-between items-center text-dark hover:text-primary transition-colors py-2 font-medium">
          个人主页 <i class="fa fa-chevron-down text-xs transition-transform"></i>
        </button>
        <div class="mobile-dropdown-content hidden pl-4 pt-2 pb-3 space-y-2">
          <a href="#profile" class="block text-dark hover:text-primary transition-colors py-1">个人信息</a>
          <a href="/changeinfo/" class="block text-dark hover:text-primary transition-colors py-1">修改个人信息</a>
          <a href="#interview-record" class="block text-dark hover:text-primary transition-colors py-1">面试记录</a>
          <a href="#exam-record" class="block text-dark hover:text-primary transition-colors py-1">笔试记录</a>
          <div class="border-t border-gray-100 my-1 w-2/3"></div>
          <a href="#about" class="block text-dark hover:text-primary transition-colors py-1">关于我们</a>
          <a href="#logout" class="block text-dark hover:text-primary transition-colors py-1 text-red-600">注销</a>
        </div>
      </div>

      <a href="#contact" class="block bg-primary text-white px-5 py-2 rounded-full text-center hover:bg-primary/90 transition-colors font-medium">了解更多</a>
    </div>
  </div>
</nav>

  <!-- 区域 -->
  <header class="pt-32 pb-20 md:pt-40 md:pb-32 bg-gradient-to-br from-primary/5 to-primary/10">
    <div class="container mx-auto px-4 md:px-6 lg:px-8">
      <div class="flex flex-col md:flex-row items-center">
        <div class="md:w-1/2 mb-10 md:mb-0">
          <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark mb-6">
            多模态智能模拟<br>
            <span class="text-primary">面试评测智能体</span>
          </h1>
          <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-lg">
            面向高校学生的智能化面试训练系统，通过多模态数据分析，提供精准面试评测与个性化提升方案，助力毕业生从容应对职场挑战。
          </p>
          <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
            <a href="#features" class="bg-primary text-white px-8 py-3 rounded-full text-center hover:bg-primary/90 transition-all shadow-lg hover:shadow-primary/20 font-medium">
              查看功能 <i class="fa fa-arrow-right ml-2"></i>
            </a>
            <a href="#business" class="bg-white text-primary border-2 border-primary px-8 py-3 rounded-full text-center hover:bg-primary/5 transition-all font-medium">
              了解场景
            </a>
              <a href="#business" class="bg-white text-primary border-2 border-primary px-8 py-3 rounded-full text-center hover:bg-primary/5 transition-all font-medium">
              立即使用
            </a>
          </div>
        </div>
        <div class="md:w-1/2 relative">
          <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl">
            <img src="https://picsum.photos/id/180/800/500" alt="智能面试模拟场景" class="w-full h-auto">
            <div class="absolute inset-0 bg-gradient-to-t from-primary/40 to-transparent"></div>
            <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
              <div class="flex items-center space-x-3 mb-2">
                <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                <div class="w-2 h-2 rounded-full bg-yellow-500 animate-pulse"></div>
                <div class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></div>
              </div>
              <h3 class="text-xl font-semibold">智能面试评测系统演示</h3>
            </div>
          </div>
          <!-- 装饰元素 -->
          <div class="absolute -top-6 -right-6 w-32 h-32 bg-secondary/20 rounded-full blur-3xl"></div>
          <div class="absolute -bottom-8 -left-8 w-40 h-40 bg-accent/20 rounded-full blur-3xl"></div>
        </div>
      </div>
    </div>
  </header>

  <main>
    <!-- 简介部分 -->
    <section id="intro" class="py-20 bg-white">
      <div class="container mx-auto px-4 md:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16 section-fade">


        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center section-fade">
          <div>
            <h3 class="text-2xl font-bold text-dark mb-6">解决就业面试难题的智能化方案</h3>
            <p class="text-gray-600 mb-6 leading-relaxed">
              随着高校毕业生人数逐年攀升，求职竞争愈发激烈，面试作为求职的核心环节，成为学生能力展示的关键场景。多数学生因缺乏实战面试经验、难以精准把握企业需求、对岗位需求认知不足、表达能力欠缺等问题错失就业机会，亟需通过智能化手段提供针对性训练与反馈。
            </p>
            <p class="text-gray-600 mb-8 leading-relaxed">
              本赛系统在利用人工智能、多模态数据分析等技术，构建智能化、沉浸式面试评测智能体，精准诊断学生面试短板并提供个性化提升方案，成为破解就业难题的关键方向。
            </p>

            <div class="space-y-4">
              <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mt-1">
                  <i class="fa fa-rocket text-primary text-xl"></i>
                </div>
                <div>
                  <h4 class="font-semibold text-dark mb-1">实现目标</h4>
                  <p class="text-gray-600">构建多模态智能面试评测系统，提供模拟面试与精准反馈</p>
                </div>
              </div>

              <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mt-1">
                  <i class="fa fa-line-chart text-primary text-xl"></i>
                </div>
                <div>
                  <h4 class="font-semibold text-dark mb-1">实用价值</h4>
                  <p class="text-gray-600">帮助学生提升面试技巧，增强就业竞争力，缓解求职焦虑</p>
                </div>
              </div>

              <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mt-1">
                  <i class="fa fa-cogs text-primary text-xl"></i>
                </div>
                <div>
                  <h4 class="font-semibold text-dark mb-1">涉及技术</h4>
                  <p class="text-gray-600">人工智能、多模态数据分析、自然语言处理、计算机视觉</p>
                </div>
              </div>
            </div>
          </div>

          <div class="relative">
            <div class="relative z-10 rounded-2xl overflow-hidden shadow-xl">
              <img src="https://picsum.photos/id/26/800/600" alt="赛题技术架构" class="w-full h-auto">
              <div class="absolute inset-0 bg-gradient-to-t from-dark/60 to-transparent"></div>
              <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
                <h3 class="text-xl font-semibold">多模态面试评测技术框架</h3>
              </div>
            </div>
            <!-- 装饰元素 -->
            <div class="absolute -top-4 -left-4 w-20 h-20 bg-secondary/30 rounded-full blur-2xl"></div>
            <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-accent/30 rounded-full blur-2xl"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- 业务场景部分 -->
    <section id="business" class="py-20 bg-gray-50">
      <div class="container mx-auto px-4 md:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16 section-fade">
          <h2 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-dark mb-4">业务场景</h2>
          <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
          <p class="text-lg text-gray-600">
            描述赛题相关的真实企业业务背景与应用场景
          </p>
        </div>

        <div class="bg-white rounded-2xl shadow-xl overflow-hidden section-fade">
          <div class="grid grid-cols-1 lg:grid-cols-2">
            <div class="p-8 md:p-12 lg:p-16">
              <h3 class="text-2xl font-bold text-dark mb-6">高校学生面试训练的现实需求</h3>
              <p class="text-gray-600 mb-8 leading-relaxed">
                本赛题旨在开发一个高校学生多模态模拟面试评测智能体，通过模拟真实面试场景，提供全面的面试反馈，帮助高校实习就业学生更好地准备实际面试。
              </p>

              <div class="space-y-6">
                <div>
                  <div class="flex items-center space-x-3 mb-2">
                    <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
                      <i class="fa fa-user text-primary"></i>
                    </div>
                    <h4 class="font-semibold text-dark">目标用户</h4>
                  </div>
                  <p class="text-gray-600">面向不同专业和岗位的高校学生，尤其是即将进入实习或就业阶段的大学生</p>
                </div>

                <div>
                  <div class="flex items-center space-x-3 mb-2">
                    <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
                      <i class="fa fa-virtual-reality text-primary"></i>
                    </div>
                    <h4 class="font-semibold text-dark">应用场景</h4>
                  </div>
                  <p class="text-gray-600">提供虚拟面试环境，进行模拟面试练习，弥合课堂教学与职业实践之间的体验鸿沟</p>
                </div>

                <div>
                  <div class="flex items-center space-x-3 mb-2">
                    <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
                      <i class="fa fa-bar-chart text-primary"></i>
                    </div>
                    <h4 class="font-semibold text-dark">核心价值</h4>
                  </div>
                  <p class="text-gray-600">通过多模态分析提供实时反馈，帮助学生针对性改进面试表现，增强实际面试能力</p>
                </div>
              </div>
            </div>

            <div class="bg-primary relative">
              <div class="absolute inset-0 opacity-10">
                <i class="fa fa-comments-o text-[400px] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></i>
              </div>
              <div class="p-8 md:p-12 lg:p-16 text-white relative z-10">
                <h3 class="text-2xl font-bold mb-6">智能体带来的改变</h3>
                <p class="mb-8 leading-relaxed">
                  智能体不仅能够缓解学生的"求职焦虑"，还能帮助他们了解岗位技能和行业需求，增强自信心与职业规划意识，最终增加就业机会。
                </p>

                <ul class="space-y-4">
                  <li class="flex items-start space-x-3">
                    <div class="w-6 h-6 bg-white/20 rounded-full flex items-center justify-center mt-1">
                      <i class="fa fa-check text-white text-xs"></i>
                    </div>
                    <span>通过技术赋能，让模拟面试成为走向职场的"垫脚石"</span>
                  </li>
                  <li class="flex items-start space-x-3">
                    <div class="w-6 h-6 bg-white/20 rounded-full flex items-center justify-center mt-1">
                      <i class="fa fa-check text-white text-xs"></i>
                    </div>
                    <span>缩短从校园到职场的角色转换周期，加速职业适应</span>
                  </li>
                  <li class="flex items-start space-x-3">
                    <div class="w-6 h-6 bg-white/20 rounded-full flex items-center justify-center mt-1">
                      <i class="fa fa-check text-white text-xs"></i>
                    </div>
                    <span>提供个性化的提升路径，针对性强化薄弱环节</span>
                  </li>
                  <li class="flex items-start space-x-3">
                    <div class="w-6 h-6 bg-white/20 rounded-full flex items-center justify-center mt-1">
                      <i class="fa fa-check text-white text-xs"></i>
                    </div>
                    <span>多维度能力评估，全面了解自身面试表现</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 功能需求部分 -->
    <section id="features" class="py-20 bg-white">
      <div class="container mx-auto px-4 md:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16 section-fade">
          <h2 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-dark mb-4">基本功能需求</h2>
          <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>

        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 section-fade">
          <!-- 功能卡片1 -->
          <div class="bg-white rounded-xl shadow-lg p-6 card-hover border border-gray-100">
            <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
              <i class="fa fa-sitemap text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-dark mb-3">场景覆盖</h3>
            <p class="text-gray-600 mb-4">
              支持数据库、数通、深度学习、前端4个技术领域的典型岗位面试场景。
            </p>
            <ul class="space-y-2 text-gray-600">
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>多领域岗位场景模拟</span>
              </li>
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>行业针对性面试问题</span>
              </li>
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>岗位技能匹配评估</span>
              </li>
            </ul>
          </div>

          <!-- 功能卡片2 -->
          <div class="bg-white rounded-xl shadow-lg p-6 card-hover border border-gray-100">
            <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
              <i class="fa fa-microphone text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-dark mb-3">多模态分析</h3>
            <p class="text-gray-600 mb-4">
              整合语音(语言逻辑、情感语调)、视频(微表情、肢体语言)、文本(应答内容、简历)等多维度数据，构建动态量化评测体系。
            </p>
            <ul class="space-y-2 text-gray-600">
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>语音情感与逻辑分析</span>
              </li>
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>面部微表情识别</span>
              </li>
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>肢体语言分析</span>
              </li>
            </ul>
          </div>

          <!-- 功能卡片3 -->
          <div class="bg-white rounded-xl shadow-lg p-6 card-hover border border-gray-100">
            <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
              <i class="fa fa-line-chart text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-dark mb-3">智能反馈</h3>
            <p class="text-gray-600 mb-4">
              支持生成可视化评测反馈报告，包含能力雷达图、关键问题定位及改进建议，如"回答缺乏STAR结构"、"眼神交流不足"。
            </p>
            <ul class="space-y-2 text-gray-600">
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>多维度能力雷达图</span>
              </li>
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>问题定位与具体建议</span>
              </li>
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>可视化报告下载</span>
              </li>
            </ul>
          </div>


          <!-- 功能卡片4 -->
          <div class="bg-white rounded-xl shadow-lg p-6 card-hover border border-gray-100">
            <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
              <i class="fa fa-users text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-dark mb-3">核心能力指标</h3>
            <p class="text-gray-600 mb-4">
              包含至少5项核心能力指标评估，如专业知识水平、技能匹配度、语言表达能力、逻辑思维能力等。
            </p>
            <ul class="space-y-2 text-gray-600">
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>专业知识水平评估</span>
              </li>
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>岗位技能匹配度</span>
              </li>
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>语言表达能力</span>
              </li>
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>逻辑思维能力</span>
              </li>
            </ul>
          </div>

          <!-- 功能卡片6 -->
          <div class="bg-white rounded-xl shadow-lg p-6 card-hover border border-gray-100">
            <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
              <i class="fa fa-calendar-check-o text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-dark mb-3">实时评测系统</h3>
            <p class="text-gray-600 mb-4">
              在模拟面试过程中提供实时反馈，帮助学生即时调整表现，形成良性训练循环。
            </p>
            <ul class="space-y-2 text-gray-600">
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>面试过程实时分析</span>
              </li>
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>即时表现建议</span>
              </li>
              <li class="flex items-center space-x-2">
                <i class="fa fa-check text-secondary"></i>
                <span>训练效果即时反馈</span>
              </li>
            </ul>
          </div>
        </div>


        <!-- 模拟反馈报告 -->
        <div class="mt-20 section-fade">
          <h3 class="text-2xl font-bold text-center mb-12">智能反馈报告示例</h3>
          <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 lg:p-10">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
              <div class="lg:col-span-2">
                <h4 class="font-semibold text-lg mb-4">能力评估雷达图</h4>
                <div class="w-full h-80">
                  <canvas id="skillRadarChart"></canvas>
                </div>
              </div>
              <div>
                <h4 class="font-semibold text-lg mb-4">关键改进建议</h4>
                <div class="space-y-4">
                  <div class="bg-gray-50 p-4 rounded-lg">
                    <h5 class="font-medium text-dark mb-2">表达结构优化</h5>
                    <p class="text-gray-600 text-sm">回答缺乏STAR结构(情境、任务、行动、结果)，建议使用结构化表达提升说服力</p>
                  </div>
                  <div class="bg-gray-50 p-4 rounded-lg">
                    <h5 class="font-medium text-dark mb-2">眼神交流不足</h5>
                    <p class="text-gray-600 text-sm">面试过程中眼神交流较少，建议保持与面试官的眼神接触，展现自信</p>
                  </div>
                  <div class="bg-gray-50 p-4 rounded-lg">
                    <h5 class="font-medium text-dark mb-2">专业知识深化</h5>
                    <p class="text-gray-600 text-sm">部分技术问题回答不够深入，建议补充学习分布式系统相关知识</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 技术架构部分 -->
    <section id="technology" class="py-20 bg-gray-50">
      <div class="container mx-auto px-4 md:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16 section-fade">
          <h2 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-dark mb-4">技术架构</h2>
          <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
          <p class="text-lg text-gray-600">
            智能体开发涉及的核心技术与系统架构
          </p>
        </div>

        <div class="section-fade">
          <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
            <div class="p-8 md:p-12">
              <h3 class="text-2xl font-bold text-dark mb-8 text-center">多模态智能面试评测系统架构</h3>

              <div class="relative">
                <!-- 架构图 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
                  <!-- 输入层 -->
                  <div class="bg-gray-50 p-6 rounded-xl text-center border border-gray-200">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                      <i class="fa fa-input text-primary text-2xl"></i>
                    </div>
                    <h4 class="font-bold text-lg mb-2">多模态输入层</h4>
                    <p class="text-gray-600 text-sm">
                      采集面试过程中的多种数据类型，为智能分析提供全面信息
                    </p>
                    <ul class="mt-4 space-y-2 text-left px-4">
                      <li class="text-sm text-gray-600"><i class="fa fa-microphone text-primary mr-2"></i>语音数据</li>
                      <li class="text-sm text-gray-600"><i class="fa fa-video-camera text-primary mr-2"></i>视频数据</li>
                      <li class="text-sm text-gray-600"><i class="fa fa-file-text-o text-primary mr-2"></i>文本数据</li>
                      <li class="text-sm text-gray-600"><i class="fa fa-mouse-pointer text-primary mr-2"></i>交互数据</li>
                    </ul>
                  </div>

                  <!-- 处理层 -->
                  <div class="bg-primary p-6 rounded-xl text-center text-white border-2 border-white relative">
                    <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                      <i class="fa fa-cogs text-white text-2xl"></i>
                    </div>
                    <h4 class="font-bold text-lg mb-2">智能处理层</h4>
                    <p class="text-white/80 text-sm">
                      核心算法处理模块，实现多模态数据的分析与评估
                    </p>
                    <div class="mt-4 grid grid-cols-2 gap-2 text-left px-4">
                      <div class="text-sm">
                        <i class="fa fa-volume-up mr-2"></i>语音识别
                      </div>
                      <div class="text-sm">
                        <i class="fa fa-language mr-2"></i>NLP分析
                      </div>
                      <div class="text-sm">
                        <i class="fa fa-eye mr-2"></i>计算机视觉
                      </div>
                      <div class="text-sm">
                        <i class="fa fa-line-chart mr-2"></i>评估算法
                      </div>
                    </div>
                    <!-- 装饰元素 -->
                    <div class="absolute -top-4 -right-4 w-10 h-10 bg-white/20 rounded-full"></div>
                    <div class="absolute -bottom-4 -left-4 w-10 h-10 bg-white/20 rounded-full"></div>
                  </div>

                  <!-- 输出层 -->
                  <div class="bg-gray-50 p-6 rounded-xl text-center border border-gray-200">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                      <i class="fa fa-output text-primary text-2xl"></i>
                    </div>
                    <h4 class="font-bold text-lg mb-2">反馈输出层</h4>
                    <p class="text-gray-600 text-sm">
                      将分析结果转化为用户可理解的反馈形式，支持个性化提升
                    </p>
                    <ul class="mt-4 space-y-2 text-left px-4">
                      <li class="text-sm text-gray-600"><i class="fa fa-bar-chart text-primary mr-2"></i>可视化报告</li>
                      <li class="text-sm text-gray-600"><i class="fa fa-comments text-primary mr-2"></i>语音反馈</li>
                      <li class="text-sm text-gray-600"><i class="fa fa-graduation-cap text-primary mr-2"></i>学习推荐</li>
                      <li class="text-sm text-gray-600"><i class="fa fa-history text-primary mr-2"></i>进度跟踪</li>
                    </ul>
                  </div>
                </div>

                <!-- 连接线 -->
                <div class="absolute top-1/2 left-1/4 transform -translate-x-1/2 h-1 bg-primary/30 z-0"></div>
                <div class="absolute top-1/2 right-1/4 transform translate-x-1/2 h-1 bg-primary/30 z-0"></div>
              </div>

              <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                  <h4 class="font-bold text-lg mb-4 flex items-center">
                    <i class="fa fa-code text-primary mr-2"></i>核心技术栈
                  </h4>
                  <div class="space-y-3">
                    <div class="flex items-center">
                      <span class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                        <i class="fa fa-python text-gray-600"></i>
                      </span>
                      <span>Python</span>
                    </div>
                    <div class="flex items-center">
                      <span class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                        <i class="fa fa-tensorflow text-gray-600"></i>
                      </span>
                      <span>TensorFlow/PyTorch</span>
                    </div>
                    <div class="flex items-center">
                      <span class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                        <i class="fa fa-language text-gray-600"></i>
                      </span>
                      <span>NLTK/SpaCy</span>
                    </div>
                    <div class="flex items-center">
                      <span class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                        <i class="fa fa-camera text-gray-600"></i>
                      </span>
                      <span>OpenCV</span>
                    </div>
                  </div>
                </div>

                <div>
                  <h4 class="font-bold text-lg mb-4 flex items-center">
                    <i class="fa fa-server text-primary mr-2"></i>系统组件
                  </h4>
                  <div class="space-y-3">
                    <div class="flex items-center">
                      <span class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                        <i class="fa fa-microphone text-gray-600"></i>
                      </span>
                      <span>语音处理模块</span>
                    </div>
                    <div class="flex items-center">
                      <span class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                        <i class="fa fa-video-camera text-gray-600"></i>
                      </span>
                      <span>视觉分析模块</span>
                    </div>
                    <div class="flex items-center">
                      <span class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                        <i class="fa fa-comment text-gray-600"></i>
                      </span>
                      <span>语义理解模块</span>
                    </div>
                    <div class="flex items-center">
                      <span class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                        <i class="fa fa-line-chart text-gray-600"></i>
                      </span>
                      <span>评估算法模块</span>
                    </div>
                  </div>
                </div>

                <div>
                  <h4 class="font-bold text-lg mb-4 flex items-center">
                    <i class="fa fa-database text-primary mr-2"></i>数据支撑
                  </h4>
                  <div class="space-y-3">
                    <div class="flex items-center">
                      <span class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                        <i class="fa fa-users text-gray-600"></i>
                      </span>
                      <span>面试语料库</span>
                    </div>
                    <div class="flex items-center">
                      <span class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                        <i class="fa fa-file-text-o text-gray-600"></i>
                      </span>
                      <span>岗位知识库</span>
                    </div>
                    <div class="flex items-center">
                      <span class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                        <i class="fa fa-graduation-cap text-gray-600"></i>
                      </span>
                      <span>学习资源库</span>
                    </div>
                    <div class="flex items-center">
                      <span class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                        <i class="fa fa-line-chart text-gray-600"></i>
                      </span>
                      <span>评估指标体系</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


  </main>


  <!-- 返回顶部按钮 -->
  <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all z-50">
    <i class="fa fa-arrow-up"></i>
  </button>

  <!-- JavaScript -->
  <script>
    // 导航栏滚动效果
    const nav = document.getElementById('main-nav');
    const backToTop = document.getElementById('back-to-top');

    window.addEventListener('scroll', function() {
      if (window.scrollY > 50) {
        nav.classList.add('nav-scrolled');
        backToTop.classList.remove('opacity-0', 'invisible');
        backToTop.classList.add('opacity-100', 'visible');
      } else {
        nav.classList.remove('nav-scrolled');
        backToTop.classList.add('opacity-0', 'invisible');
        backToTop.classList.remove('opacity-100', 'visible');
      }

      // 滚动动画
      const sections = document.querySelectorAll('.section-fade');
      sections.forEach(section => {
        const sectionTop = section.getBoundingClientRect().top;
        const windowHeight = window.innerHeight;

        if (sectionTop < windowHeight - 100) {
          section.classList.add('visible');
        }
      });
    });

    // 移动端菜单
    const menuBtn = document.getElementById('menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');

    menuBtn.addEventListener('click', function() {
      mobileMenu.classList.toggle('hidden');
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();

        const targetId = this.getAttribute('href');
        if (targetId === '#') return;

        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });

          // 关闭移动端菜单
          if (!mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
          }
        }
      });
    });

    // 返回顶部
    backToTop.addEventListener('click', function() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });

    // 雷达图

  </script>
</body>
</html>